<template>
	<view >
	
		<view class="top-bg"></view>
		<view class="user-info u-flex">
			<template v-if="userInfo.id">
				<image class="avatar" :src="userInfo.headimg"></image>
				<view class="name u-line-1">{{userInfo.nickname}}</view>
			</template>
			<template v-else>
				<open-data class="avatar" type="userAvatarUrl"></open-data>
				<view class="no-login-btn" @click="jump('/pages/login/login')">点击登录</view>
			</template>
		</view>
		
		
		
		<view style="text-align: center;margin-top: 20rpx;"  v-if="userInfo.id" @click="$app.jump('/pages/college/upgrade')">
			<view class="vipBlock">
				<u-icon name="integral-fill" color="#fff"></u-icon>
				<text style="font-size: 26rpx;margin-left: 10rpx;">
					{{userInfo.levelName ? userInfo.levelName + '会员' : '您还不是会员'}}
				</text>
				
			</view>
		</view>
		
		<!-- <view class="vip-card" v-if="userInfo.id" @click="$app.jump('/pages/college/upgrade')">
			<image class="vip-level" :src="userInfo.levelLogo" v-if="userInfo.levelLogo"></image>
			<image class="vip-bg-img" src="/static/icon2/vip-bg-icon.png"></image>
			<view class="vip-text">{{userInfo.levelName ? userInfo.levelName + '会员' : '您还不是会员'}}</view>
		</view> -->
		
		<view class="getvip" style="margin-top: 20rpx;" @click="getvip" v-if="!userInfo.vip">
			<image class="getvip" src="/static/vip.png" ></image>
		</view>
			
		
		
		<view class="mine-order">
			<view class="order-type u-flex">
				<view class="item" @click="$app.jump('/pages/mine/account')">
					<image src="/static/icon2/mine1.png"></image>
					<text>账户中心</text>
				</view>
				<view class="item" @click="$app.jump('/pages/order/order-list')">
					<image src="/static/icon2/mine2.png"></image>
					<text>我的订单</text>
				</view>
				<view class="item" @click="$app.jump('/pages/mine/my-activity')">
					<image src="/static/icon2/mine3.png"></image>
					<text>我的活动</text>
				</view>
				<view class="item" @click="$app.jump('/pages/mine/team')">
					<image src="/static/icon2/mine4.png"></image>
					<text>我的团队</text>
				</view>
			</view>
		</view>
		
		<view class="mine-list">
			<view class="item u-flex" hover-class="active" @click="getPoster">
				<view class="title">邀请好友</view>
				<u-icon name="arrow-right" color="#666"></u-icon>
			</view>
			<view class="item u-flex" hover-class="active" @click="$app.jump('/pages/mine/user-info')">
				<view class="title">个人信息</view>
				<u-icon name="arrow-right" color="#666"></u-icon>
			</view>
			<view class="item u-flex" hover-class="active" @click="$app.jump('/pages/address/list')">
				<view class="title">收货地址</view>
				<u-icon name="arrow-right" color="#666"></u-icon>
			</view>
		</view>
		
		<view class="mine-list">
			<view class="item u-flex" hover-class="active" @click="$app.jump('/pages/mine/my-reply')">
				<view class="title">我的回复</view>
				<u-icon name="arrow-right" color="#666"></u-icon>
			</view>
			<view class="item u-flex" hover-class="active" @click="$app.jump('/pages/mine/my-publish')">
				<view class="title">我的发布</view>
				<u-icon name="arrow-right" color="#666"></u-icon>
			</view>
		</view>
		
		<view class="mine-list" style="border-bottom: 0;">
			<view class="item u-flex" hover-class="active" @click="jump('/pages/mine/feedback')">
				<view class="title">问题反馈</view>
				<u-icon name="arrow-right" color="#666"></u-icon>
			</view>
			<button class="u-reset-button item u-flex" hover-class="active" open-type="contact">
				<view class="title">联系客服</view>
				<u-icon name="arrow-right" color="#666"></u-icon>
			</button>
		</view>
		
		<u-popup v-model="showMobile" mode="center" border-radius="24" closeable duration="0">
			<show-mobile v-if="showMobile" @close="showMobile = !1"></show-mobile>
		</u-popup>
		
		<u-mask :show="show" @click="show = false">
			<push-topics v-if="show" @publish="show = !1"></push-topics>
		</u-mask>
		
		
		<u-mask :show="showIndex">
			<view class="index-show u-flex">
				<view class="index-show-box">
					<image class="go-pay" src="/static/show-index.png" mode="widthFix"
						@click="vipCharge"></image>
					<view class="u-flex">
						<image class="close" src="/static/close.png" @click="showIndex = false"></image>
					</view>
				</view>
			</view>
		</u-mask>
		
			
	
	<u-tabbar :mid-button="true" :border-top="false" height="100rpx" bgColor="#67EEE4" :before-switch="beforeSwitch"
		inactive-color="#000" active-color="#fff" v-model="currentTab" :list="vuex_tabbar"></u-tabbar>
	
	
	</view>
</template>

<script>

	
	
	export default {
		
		data() {
			return {
				tabbg: 'linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%)',
				userInfo:'',
				showMobile:!1,
				show:!1,
				currentTab:4,
				showIndex: !1
			}
		},
		methods: {
			vipCharge(){
				this.$u.api.viprRecharge({
				}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp:res.timestamp,
						nonceStr:res.noncestr,
						signType:res.signtype,
						paySign:res.paysign,
						appid:res.appid,
						package:res.package,
						success:()=> {
							// 支付成功=>微信更新用户信息
							this.$u.toast('支付成功')
						},
						fail:err=>{
							this.$u.toast('支付失败')
						},
						complete:err=>{
							this.showIndex=false
						}
					})
				})
			},
			getvip(){
				this.showIndex = !0
			},
			
			change(index) {
				this.current = 0//index;
			},
			getUserInfo(){
				this.$store.dispatch('userInfo',this).then(res=>{
					this.userInfo = res
					if(!res.mobile)this.showMobile = !0
				})
			},
			beforeSwitch(e) {
				let url = ''
				if (e == 2) url = '/pages/fabu/index';
				if (e == 3) url = '/pages/college/index';
				if (e == 0) url = '/pages/index/index';
				if (e == 1) url = '/pages/topics/list';
				if (e == 4) url = '/pages/mine/mine';
				console.log(url,"url")
				// 跳转
				url && uni.switchTab({
					url: url
				})
				return false
			},
			getPoster(){
				uni.navigateTo({
					url:'/pages/post/index'
				})
				
			}
		},
		onLoad() {
			this.getUserInfo()
			// 资金配置
			this.$store.dispatch('commission',this)
		},
		onShow() {
			if(this.token){
				this.getUserInfo()
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-tabbar__content .u-tabbar__content__item:nth-of-type(3) .u-tabbar__content__item__text text{color: #333;font-weight: bold;}
	.navigator-hover{background-color: transparent;opacity: 1;}
	.top-bg{
		background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);
		position: absolute;height: 218rpx;overflow: hidden;width: 100%;
		&::after{content: '';display: block;position: absolute;bottom: -195rpx;left: 50%;transform: translateX(-50%);border: 200rpx solid #fff;width: 2500rpx;height: 2500rpx;border-radius: 50%;}
	}
	.user-info{
		position: relative;z-index: 1;flex-direction: column;padding-top: 150rpx;
		.avatar{display: block;width: 100rpx;height: 100rpx;border: 10rpx solid #fff;border-radius: 50%;overflow: hidden;box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: 0.15);}
		.name{width: 100%;font-weight: bold;font-size: 28rpx;padding-top: 14rpx;text-align: center;}
		
		.no-login-btn{background-color: #444444;color: #fff;border-radius: 12rpx;padding: 8rpx 0;width: 200rpx;text-align: center;margin: 20rpx auto 0;}
	}
	
	.vipBlock{
		background: #00BBAA ;
		padding: 7rpx 15rpx;
		border-radius: 20rpx;
		color: #fff;
		display: inline-block;
		color: #fff;
		
	}
	
	.index-show {
		width: 100%;
		height: 100%;
		justify-content: center;
	
		.index-show-box {
			.go-pay {
				width: 600rpx;
				display: block;
				padding-left: 45rpx;
			}
	
			.close {
				width: 60rpx;
				height: 60rpx;
				display: block;
				margin: 0 auto;
			}
		}
	}
	.getvip{
		width: 670rpx;
		height: 160rpx;
		margin: auto;
	}
	// 会员卡片
	.vip-card{
		background-color: #262838;height: 176rpx;border-radius: 20rpx;position: relative;margin: 30rpx 50rpx 0;
		.vip-bg-img{width: 280rpx;position: absolute;right: 0;bottom: 0;height: 138rpx;display: block;}
		.vip-level{width: 90rpx;height: 52rpx;display: block;position: absolute;left: 14rpx;top: 24rpx;}
		.vip-text{color: #fff;font-size: 30rpx;position: absolute;left: 20rpx;bottom: 20rpx;white-space: nowrap;}
	}
	
	// 我的订单
	.mine-order{
		padding: 30rpx 35rpx;
		.order-type{
			justify-content: space-around;padding-top: 34rpx;
			image{width: 80rpx;height: 80rpx;border-radius: 50%;display: block;margin: 0 auto;}
			.item{
				text{display: block;text-align: center;margin-top: 10rpx;}
			}
		}
	}
	// 我的
	.mine-list{
		padding: 0 60rpx;border-bottom: 10rpx solid #F2F2F2FF;
		.item{border-bottom: 1rpx solid #eee;line-height: 88rpx;
			&:last-child{border-bottom: 0;}
			&.active{background-color: #f9f9f9;}
			image{width: 46rpx;height: 46rpx;display: block;}
			.title{margin-left: 10rpx;color: #222;font-size: 30rpx;flex: 1;text-align: left;}
			.tel{font-weight: bold;white-space: nowrap;}
		}
	}
</style>
